<template>
  <view class="t-list flexc">
    <view class="search">
      <u-search
        v-model="keyword"
        height="36"
        bgColor="#F6F6F6"
        :showAction="false"
        searchIconColor="#000000"
        :searchIconSize="20"
        placeholderColor="#BDBDBD"
        placeholder="搜索您需要的服务"
        @search="handleSearch"></u-search>
    </view>
    <view class="flex1 over">
      <scroll-view
        scroll-y="true"
        style="height: 100%"
        @scrolltolower="loadmore">
        <view class="p24 flex-between">
          <view class="box" v-for="item in 4">
            <image src="/static/demo.jpg" mode="aspectFill"></image>
            <view class="box-t">带用吗</view>
            <view class="box-t1">美术老师</view>
          </view>
        </view>
        <u-loadmore :status="product_loadmore_status" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore
    };
  },
  methods: {
    //上拉加载
    loadmore() {},
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.t-list {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  .search {
    padding: 8upx 32upx;
    background: #fff;
  }
  .p24 {
    padding: 24upx 32upx;
    flex-wrap: wrap;
  }
  .box {
    width: 334upx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    background: #ffffff;
    margin-bottom: 24upx;
    & > image {
      width: 334rpx;
      height: 502rpx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
    }
    &-t {
      margin: 18upx 22upx 20upx 24upx;
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }
    &-t1 {
      width: 112rpx;
      height: 32rpx;
      background: #f49c0d;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      text-align: center;
      line-height: 32upx;
      font-size: 20rpx;
      color: #ffffff;
      margin-bottom: 34upx;
      margin-left: 24upx;
    }
  }
}
</style>
